<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>model</title>
</head>

<body>
    <div class="view">
    </div>
</body>
<script type='module'>
    import{Module,Nodom} from '/dist/nodom.esm.min.js'
    class Module1 extends Module{
        template(){
            return `
            <div>
                <button e-click='change'>change</button>
                <button e-click='change1'>change1</button>
                <button e-click='delProp'>delProp</button>
                <button e-click='unwatch'>cancel watch</button>
                <div>{{name}}</div>
                <div>lastName:{{getName(name1,'lastName')}}</div>
                <for cond={{rows}}>{{name}}</for>
                <div>x.y.z is :{{x.y.z}}</div>
                <div class="tip">多层model</div>
                <div class="code">
                    <div x-model="user">
                        顾客信息：
                        <div x-model="name">
                            <div>姓氏：{{lastName}}</div>
                            <div>名字：{{firstName}}</div>
                        </div>
                    </div>
                </div>
                <div class="tip">repeat</div>
                <ul>
                    <li x-repeat={{datas}}>a is:{{a}},b is:{{b}}</li>
                </ul>
                <div class="tip">多层数据</div>
                <div x-model="user.order.foods">
                    用户点单：
                    <div>第一道菜：{{food1.name}}，价格：{{food1.price|currency}}</div>
                    <div>第二道菜：{{food2.name}}，价格：{{food2.price|currency}}</div>
                    <div>第三道菜：{{food3.name}}，价格：{{food3.price|currency}}</div>
                    <div>第四道菜：{{food4.name}}，价格：{{food4.price|currency}}</div>
                    金额：
                    <div>共消费：{{(food1.price+food2.price+food3.price+food4.price)|currency}}</div>
                </div>
                <p>set测试</p>
                <button e-click='setValue'>设置值</button>
                <div>设置的值是:{{x.xx.xxx}}</div>
                <div>{{wrongfield.xxx}}</div>
            </div>
            `
        }
        data(){
            return{
                x: {
                    y: {
                        z: 'hello'
                    },
                    xx:{
                        xxx:'nodom1'
                    }
                },
                datas: [{
                    a: 1,
                    b: 2
                }, {
                    a: 2,
                    b: 4
                }],
                show:true,
                name:'nodom',
                name1: {
                    firstName: 'San',
                    lastName: 'Zhang'
                },
                user: {
                    name: {
                        firstName: 'San',
                        lastName: 'Zhang'
                    },
                    order: {
                        foods: {
                            food1: {
                                name: '酸菜鱼',
                                price: 40
                            },
                            food2: {
                                name: '麻婆豆腐',
                                price: 15
                            },
                            food3: {
                                name: '回锅肉',
                                price: 28
                            },
                            food4: {
                                name: '番茄蛋汤',
                                price: 8
                            }
                        }
                    }
                }
            }
        }

        getName(data,name){
            return data[name]
        }
        
        change(model) {
            // model.name1 = {first:'yang'};
            // model.name='yang';
            model.name1.lastName = 'Yang'
            // // model.datas = [{a:3,b:3}];
            //model.datas.splice(1,1,{a:3,b:3});
            model.datas.push({a:555,b:555});
            // model.datas.fill({a:'aaa'},1,3)
            // model.show = false;
            // model.datas.pop();
            // model.$set("data1.data2.data3",{a:'a'});
            // console.log(model);
            //model.datas[0].a = 2;
            //model.name='123'
        }

        change1(model){
            model.name='aaa';
            model.user.name.lastName='yyyy';
            model.show=false
        }

        delProp(model){
            delete model.name;
            model.datas.pop();
        }   
        /**
         * 取消监听
         */ 
        unwatch(){
            this.cancer();
        }

        onInit(model){
            /**
             * 非深度监听，执行change1时，第二条不会触发监听事件
             */ 
            this.cancer = this.watch(['user','name','datas'],(model,key,oldValue,newValue)=>{
                console.log(this,model,key,oldValue,newValue)
            })

            /**
             * 深度监听，执行change1时，第二条会触发监听事件
             */ 
            this.cancer = this.watch(model,['user','name','datas'],(model,key,oldValue,newValue)=>{
                console.log(this,model,key,oldValue,newValue)
            },true);
        }

        setValue(){
            this.set('x.xx.xxx','nodom');
        }
    }

    Nodom.app(Module1,'div');
</script>

</html>